<template>
  <a-modal
    title="修改租約-費用清單"
    :width="900"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
       <a-table
        size="middle"
        :columns="columns"
        :dataSource="dataList"
        :pagination="false"
        :loading="memberLoading">
      </a-table>
    </a-spin>
  </a-modal>
</template>

<script>
  import moment from 'moment'
  import { getMeterListByBillId } from '@/api/modular/main/hydropowermeter/hydropowerMeterManage'
  export default {
    components: {
    },
    data () {
      return {
        // 机构行样式
        labelCol_JG: {
          xs: { span: 24 },
          sm: { span: 3 }
        },
        wrapperCol_JG: {
          xs: { span: 24 },
          sm: { span: 20 }
        },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 }
        },
        visible: false,
        confirmLoading: false,
        memberLoading: false,
        columns: [
          {
            title: '租客',
            align: 'center',
            dataIndex: 'reservation'
          },
          {
            title: '讀數',
            align: 'center',
            dataIndex: 'reading'
          },
          {
            title: '用量',
            align: 'center',
            dataIndex: 'dosage'
          },
          {
            title: '抄錶日期',
            align: 'center',
            dataIndex: 'meterReadingDate'
          },
          {
            title: '費用',
            align: 'center',
            dataIndex: 'cost'
          },
          {
            title: '收租日',
            align: 'center',
            dataIndex: 'rentedDay'
          },
          {
            title: '狀態',
            align: 'center',
            dataIndex: 'meterStatus'
          }
        ],
        dataList: []
      }
    },
    methods: {
      moment,
      // 初始化方法
      edit (houseBillId, costId) {
        this.visible = true
        this.getJsData(houseBillId, costId)
      },
      getJsData(houseBillId, costId) {
        getMeterListByBillId(houseBillId, costId).then((res) => {
          if (res.code === 200) {
            this.dataList = res.data
          } else {
            this.$message.error('查詢失敗')//  + res.message
          }
        })
      },
      handleSubmit () {
        this.handleCancel()
      },
      handleCancel () {
        this.visible = false
        this.dataList = []
      }
    }
  }
</script>
